<template>
  <div class="cxy-page">
    <el-card class="elcard" style="margin-bottom:20px;">
      <!-- 搜索 -->
      <el-autocomplete
        v-model.trim="searchText"
        :autofocus="false"
        :fetch-suggestions="querySearchAsync"
        clearable
        :placeholder="placeholder"
        size="medium"
        class="header-search-bar"
        @select="handleSelect"
        @keyup.enter.native="search"
      >
        <template slot="prefix">
          <el-select
            v-model="fieldType"
            placeholder="请选择"
            @change="handleChange"
            class="field-type-select"
          >
            <el-option
              v-for="item in fieldTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
        <i
          slot="suffix"
          class="el-input__icon el-icon-search search-btn"
          @click="search"
        ></i>
      </el-autocomplete>
      <el-button class="button" type="primary" @click="search">查询</el-button>
      <!-- <span class="advance-btn" @click="showAdvance=!showAdvance">高级筛选</span> -->
      <div v-show="showAdvance" class="classify-box">
        <p>
          <span>产业分类：</span>
          <!-- <span v-for="(item, index) in activeClassify" :key="index" class="item"><i></i></span> -->
        </p>

        <el-checkbox-group v-model="classifyGroup">
          <el-checkbox
            v-for="(item, index) in classify"
            :key="index"
            :label="item.label"
          >
            <span :title="item.tip">{{ item.label }}</span>
            <i v-if="item.label !== '综合类'" :title="item.tip" class="explain"
              ><img src="../../../../assets/img/explain.png" alt=""
            /></i>
          </el-checkbox>
        </el-checkbox-group>
        <el-button class="button advance-search-btn" type="primary"
          >查询</el-button
        >
        <!-- <ul class="classify-list">
          <li v-for="(item, index) in classify" :key="index">
            <el-button class ="button2" type="primary">{{item}}</el-button></li>
        </ul> -->
      </div>
    </el-card>
    <!--  -->
    <el-card v-show="!showDetail" class="elcard">
      <el-tabs v-model="activeName">
        <el-tab-pane label="成果已合作" name="first">
          <ResultsTable
            :activeName="activeName"
            :ndata="data"
            :noDataStr="noDataStr"
            @getShowDetail="getShowDetail"
          />
        </el-tab-pane>
        <el-tab-pane label="潜力合作" name="second">
          <PotentialTable
            :activeName="activeName"
            :searchText="searchText"
            :ndata="data"
            :noDataStr="noDataStr"
            @getShowDetail="getShowDetail"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!--  -->
  </div>
</template>

<script>
import { mapState } from "vuex";
import axios from "axios";
import PotentialTable from "./child/PotentialTable";
import ResultsTable from "./child/ResultsTable";
let jwt = require("jsonwebtoken");
let types = null;
export default {
  components: {
    PotentialTable,
    ResultsTable
  },
  data() {
    return {
      searchText:
        this.$route.query.searchText ||
        this.$store.state.synergyFirstCompanyName, // 苏州维旺科技有限公司
      placeholder: "请输入高校名称",
      fieldType: this.$route.query.fieldType || "搜企业",
      curFieldType:
        this.$route.query.fieldType === "搜高校"
          ? "高校"
          : this.$route.query.fieldType === "搜机构"
          ? "院所"
          : "企业",
      fieldTypeOptions: [],
      querySearchList: [],
      cancel: null,
      cancel2: null,
      classifyGroup: [],
      classify: [],
      activeClassify: [],
      activeName: "first",
      showAdvance: false,
      data: [],
      showDetail: false,
      noDataStr: "数据加载中..."
    };
  },
  computed: {
    ...mapState(["levelCode", "levelName"])
  },
  methods: {
    init() {
      this.fieldTypeOptions = [
        {
          label: "搜高校",
          value: "搜高校"
        },
        {
          label: "搜企业",
          value: "搜企业"
        },
        {
          label: "搜机构",
          value: "搜机构"
        }
      ];
      this.classify = [
        {
          label: "能源",
          tip:
            "能源项包括：石油天然气、煤炭、传统能源服务、太阳能、核能、风能、生物质能、波浪能、潮汐能、海洋温差能、地热能、"
        },
        {
          label: "原材料",
          tip:
            "原材料包括：化学制品、化学纤维、有机化工原料、无机化工原料、塑料、农用化学品（农药）、精细化工、添加剂、日用化工（日用化学品）、涂料、黑色金属材料、有色金属材料、非金属材料及制品、造纸业、新材料、复合材料、半导体材料、稀有金属材料、电子材料、固态矿产、液体矿产、其他矿产"
        },
        {
          label: "工业",
          tip:
            "工业包括：航天航空及国防、建筑产品、通用设备、专用设备、仪器仪表、海洋工程设备、工程机械、铁路传输设备、船舶制造、工业机器人、轴承、齿轮、传动部件、3D打印、专业服务机器人、无人机、智能物流设备、机床工具、包装材料、建筑材料、北斗终端集成、北斗系统集成、制药设备、3D数字化、节能环保、商务服务、专业服务、民用非动力核技术应用、铁路运输、道路运输、航空运输、水上运输、物流、交通运输服务、管道运输、电机、电网自动化、工控自动化、电源设备、高低压设备、其他电气设备、重型电气设备、电池、激光器、激光设备、核心激光部件、工程资讯、建筑施工、其他建筑业"
        },
        {
          label: "可选消费",
          tip:
            "可选消费包括：汽车、其他机动车、汽车服务、汽车零部件、非机动车、家庭用品、家具、纺织、服装与配饰、奢侈品、智能家居、智能穿戴、智能交通硬件、医疗健康智能硬件、消费级无人机、个人、家用服务机器人、其他智能硬件、体育产业、教育培训、旅游酒店餐饮、日常消费者服务、广告、广电、传媒、文化、出版、游戏动漫、其他文化传媒、影视、批发业、零售业、新零售、零售科技、B2C类电商、B2B类电商、其他模式电商、白色家电、小家电、黑色家电、家电零部件、其他家用电器、互联网出行"
        },
        {
          label: "主要消费",
          tip:
            "主要消费包括：农牧渔、农牧渔产品相关服务、饲料、农产品加工、林业、种植业、渔业、畜牧养殖业、动物保健（兽药）、食品、酒类、烟草、食品饮料烟草经销、食品综合、软饮料"
        },
        {
          label: "医疗保健",
          tip:
            "医疗保健包括：医学影像设备、治疗设备、辅助医疗设备、家庭医疗器械、保健用品、医用高值耗材、医用低值耗材、体外诊断、康复治疗器械、抗感染制剂、抗肿瘤及免疫调节制剂、神经系统药物制剂、血液及造血系统药物制剂、抗寄生虫病制剂、镇痛、解热、抗炎、抗风湿、抗痛风药物、心脑血管用药、呼吸系统用药、消化系统用药、泌尿系统用药、激素及内分泌药物、维生素、矿物质类药、调节水、电解质及酸碱平衡药、眼科用药、其他化学制剂、降糖药（糖尿病用药）、抗艾滋病药物、妇科用药、大输液制剂、骨骼与肌肉用药、中药材、中药饮片、中成药、中药现代化、保健药品、血制品、干细胞、重组蛋白、疫苗、基因检测、基因诊断、基因治疗、食品安全检测、其他生物科技、靶向药物、转基因技术及服务、基因编辑技术及服务、胰岛素、其他生物技术、医药流通、医药贸易、医疗保健机构、医疗保健服务、医疗信息化、互联网医疗、大宗原料药、特色原料药、医药中间体、药用辅料、医药研发外包服务（CRO）、CMO、CDMO"
        },
        {
          label: "金融地产",
          tip:
            "金融地产包括：银行、证券业、保险、互联网金融、其他金融、房地产开发、房地产服务、房地产管理、房地产周边服务"
        },
        {
          label: "信息技术",
          tip:
            "信息技术包括：软件、互联网应用、工业互联网、软件服务（SaaS）、信息技术服务、人工智能（AI）、分布式技术、大数据、AR、VR技术及服务、区块链、信息科技应用服务、计算机、电子设备及服务、电子元器件、光学光电子、传感器、集成电路、半导体设备、分立器件、LED产品及组件、半导体存储产品"
        },
        {
          label: "电信业务",
          tip:
            "电信业务包括：增值电信服务、电信运营服务、通信设备、通信技术服务"
        },
        {
          label: "公用事业",
          tip:
            "公用事业包括：电力公用事业、水公用事业、燃气公用事业、热力公用事业、复合型公用事业、独立电力生产商与能源贸易商、政府公共服务"
        },
        {
          label: "综合类"
        }
      ];
    },
    // 自动补全
    querySearchAsync(queryString, cb) {
      if (this.cancel2 !== null) {
        this.cancel2();
      }
      if (this.searchText === "") {
        cb([]);
        return;
      }
      let ths = this;
      this.querySearchList = [];
      this.$get(
        this.$Url.production.parSearch,
        {
          province: this.levelName,
          cityCode: this.levelCode,
          type: this.curFieldType,
          name: queryString || this.searchText
        },
        new axios.CancelToken(function executor(c) {
          ths.cancel2 = c;
        })
      ).then(res => {
        let list = res.data || [];
        list.forEach(v => {
          this.querySearchList.push({ value: v.name });
        });
        cb(this.querySearchList);
      });
    },
    handleSelect(item) {
      this.searchText = item.value;
      this.search();
    },
    search(activeName = "first") {
      let ths = this;
      this.data = [];
      if (this.cancel !== null) {
        this.cancel();
      }
      this.noDataStr = "数据加载中...";
      if (this.activeName === "first") {
        this.$get(
          this.$Url.production.parTeamwork,
          {
            name: this.searchText,
            type: this.curFieldType
          },
          new axios.CancelToken(function executor(c) {
            ths.cancel = c;
          })
        )
          .then(res => {
            let data = res.data || [];
            if (data.length <= 0) {
              this.noDataStr = "暂无数据";
            }
            this.data = JSON.parse(JSON.stringify(data));
          })
          .catch(err => {
            this.noDataStr = "暂无数据";
          });
      } else if (this.activeName === "second") {
        let token = this.$cookie.get("token");
        let userName = jwt.decode(token).sub;
        let an1type = "";
        if (this.curFieldType === "高校") {
          an1type = "企业";
        } else if (this.curFieldType === "企业") {
          an1type = "高校";
        } else if (this.curFieldType === "院所") {
          an1type = "企业";
        }
        this.$post(this.$Url.production.Match_up, {
          user: userName,
          company: this.searchText, //'江苏天奈科技股份有限公司',//this.searchText, //'江苏天奈科技股份有限公司',//this.searchText,
          an1type: an1type,
          province: "江苏省",
          city: this.levelName
        })
          .then(res => {
            let data = res.data || [];
            if (data.length <= 0) {
              this.noDataStr = "暂无数据";
            }
            this.data = JSON.parse(JSON.stringify(data));
          })
          .catch(err => {
            this.noDataStr = "暂无数据";
          });
      }

      let query = this.$route.query;
      this.$router.push({
        name: "SynergySearch",
        query: {
          ...query,
          searchText: this.searchText
        }
      });
    },
    getShowDetail(data) {
      this.showDetail = data;
    },
    // 判断是机构还是企业
    getTypeByName(name) {
      this.$get(this.$Url.production.getTypeByName, {
        name
      })
        .then(res => {
          let data = res.data || "";
          if (data === "高校") {
            this.fieldType = "搜高校";
            this.placeholder = "请输入高校名称";
            this.curFieldType = "高校";
          } else if (data === "企业") {
            this.fieldType = "搜企业";
            this.placeholder = "请输入企业名称";
            this.curFieldType = "企业";
          } else if (data === "机构") {
            this.fieldType = "搜机构";
            this.placeholder = "请输入机构名称";
            this.curFieldType = "院所";
          }

          let query = this.$route.query;
          this.$router.push({
            name: "SynergySearch",
            query: {
              ...query,
              fieldType: this.fieldType
            }
          });

          this.search();
        })
        .catch(err => {});
    },
    handleChange(val) {
      this.fieldType = val;
      if (this.fieldType === "搜高校") {
        this.placeholder = "请输入高校名称";
        this.curFieldType = "高校";
      } else if (this.fieldType === "搜企业") {
        this.placeholder = "请输入企业名称";
        this.curFieldType = "企业";
      } else if (this.fieldType === "搜机构") {
        this.placeholder = "请输入机构名称";
        this.curFieldType = "院所";
      }
      this.searchText = "";

      let query = this.$route.query;
      this.$router.push({
        name: "SynergySearch",
        query: {
          ...query,
          fieldType: this.fieldType,
          searchText: ""
        }
      });
    }
  },
  watch: {
    // fieldType() {
    //   if (this.fieldType === '搜高校') {
    //     this.placeholder = '请输入高校名称'
    //     this.curFieldType = '高校'
    //   } else if (this.fieldType === '搜企业') {
    //     this.placeholder = '请输入企业名称'
    //     this.curFieldType = '企业'
    //   } else if (this.fieldType === '搜机构') {
    //     this.placeholder = '请输入机构名称'
    //     this.curFieldType = '院所'
    //   }
    //   this.searchText = ''

    //   let query = this.$route.query
    //   this.$router.push({
    //     name: 'SynergySearch',
    //     query: {
    //       ...query,
    //       fieldType: this.fieldType,
    //       searchText: ''
    //     }
    //   })
    // },
    activeName() {
      let query = this.$route.query;
      this.$router.push({
        name: "SynergySearch",
        query: {
          ...query,
          activeName: this.activeName
        }
      });
      this.search();
    }
  },
  beforeMount() {
    this.init();
    let query = this.$route.query;
    if (query.activeName) {
      this.activeName = query.activeName;
    }
    if (query.fieldType) {
      this.fieldType = query.fieldType;
    }
    if (query.searchText && query.searchText !== "") {
      this.searchText = query.searchText;
    }
    this.getTypeByName(this.searchText);
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.elcard {
  text-align: left;
  .header-search-bar {
    position: relative;
    width: 40%;
    margin-left: 0;
    margin-right: 20px;
  }
  .button {
    width: 100px;
  }
  .advance-btn {
    margin-left: 20px;
    color: $mainColor;
    vertical-align: sub;
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
  }
  .explain {
    margin-left: 4px;
  }
  .advance-search-btn {
    margin-top: 10px;
  }
  .classify-box {
    p {
      padding: 10px 0;
      span {
        font-size: 12px;
        color: #86899e;
      }
    }
    .classify-list {
      position: relative;
      list-style: none;
      li {
        display: block;
        float: left;
        margin-right: 20px;
        margin-bottom: 14px;
        .button2 {
          line-height: 36px;
          padding: 0 14px;
          border: 0;
          border-radius: 4px;
          text-align: center;
          font-size: 12px;
          color: #4f515b;
          background-color: #f3f5f8;
          outline: none;
          cursor: pointer;
          &:hover {
            color: #fff;
            background-color: #433297;
          }
        }
      }
    }
  }
}

.field-type-select {
  width: 120px;
}
</style>
